<template>
    <div class="VRPanorama">
        <div id="pano"></div>
    </div>
</template>
<script lang="ts">
    import {defineComponent, ref,onMounted} from 'vue';
    export default defineComponent({
        name: 'VRPanorama',
        setup() {

            onMounted(()=>{
                let tpano = new TPano({
                    el:'pano',//照片查看器根节点dom的id
                    photo:[
                        //全景照片数组，每项为一张照片
                        {
                            url:'/src/assets/1.jpg',
                            name:'室内'
                        },
                        {
                            url:'/src/assets/2.jfif',
                            name:'建筑'
                        },
                        {
                            url:'/src/assets/3.jpg',
                            name:'kj'
                        }
                    ],
                    hotspot:[
                        //全景照片上的热点
                        {
                            source:'室内',//此热点放置在哪张全景照片上
                            position:{//热点所在的位置
                                x: 19.645850039706385,
                                y: -57.03636689933764,
                                z: -495.3215084849179
                            },
                            imgUrl: '/src/assets/outdoor.gif',
                            jumpTo:'建筑'//热点点击后跳往何方
                        }
                    ],
                    photoLoad:function(e:any){
                        console.log(e);
                    },
                    debug: true
                })
            })
            return {};
        },
    });
</script>
<style scoped>
    #pano{
        height: 100vh;
        width: 100vw;
        overflow: hidden;
    }
</style>
